<script setup lang="ts">
useHead({
  htmlAttrs: {
    lang: "zh",
  },
  script: [
    {
      src: "https://code.iconify.design/iconify-icon/2.0.0/iconify-icon.min.js",
      key: "iconify-icon",
    },
  ],
  link: [
    {
      rel: "icon",
      type: "image/x-icon",
      href: "/favicon.ico",
    },
    {
      rel: "stylesheet",
      href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
    },
    {
      rel: "stylesheet",
      href: "https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata",
    },
  ],
  title: "构建编程",
  meta: [
    {
      hid: "description hid",
      name: "description name",
      content: "a programme learning website",
    },
  ],
});
useSeoMeta({
  ogTitle: "构建编程",
  ogDescription: "programme learning website",
  // ogImage: '[og:image]',
  ogUrl: "localhost:5467",
  twitterTitle: "构建编程",
  twitterDescription: "programme learning website",
  // twitterImage: '[twitter:image]',
  twitterCard: "summary",
});
</script>

<template>
  <NuxtLayout>
    <template #title>
      <GmainTitle />
    </template>

    <template #nav>
      <GnavList />
    </template>

    <template #nav2>
      <GnavList2 />
    </template>

    <template #asideL>
      <Gaside v-if="$route.name === 'exam-eid'" />
      <div v-else />
    </template>

    <template #asideR>
      <div />
    </template>

    <template #default>
      <div class="real-main">
        <!-- nuxt自己的loading有反复的问题 -->
        <!-- <NuxtLoadingIndicator
          :height="3"
          :duration="200"
          class="!opacity-100"
        /> -->
        <NuxtPage />
      </div>
      <UNotifications id="5467">
        <template #title="{ title }">
          <span v-html="title" />
        </template>
      </UNotifications>
      <UNotifications
        id="4782"
        icon="i-heroicons-exclamation-circle"
        color="yellow"
      >
        <template #title="{ title }">
          <span v-html="title" />
        </template>
      </UNotifications>
    </template>

    <template #footer>
      <Gfooter />
    </template>
  </NuxtLayout>
</template>

<style scoped>
.layout-enter-active,
.layout-leave-active {
  transition: all 0.4s;
}

.layout-enter-from,
.layout-leave-to {
  filter: grayscale(1);
}
</style>
